<template>
	<view class="px-12 ">
		<y-tabs :list='tabList' v-model="type" @change="paging.reload()"></y-tabs>
		<z-paging ref="paging" v-model="list" @query="getList" use-page-scroll :auto="false">
			<view class="grid-columns-2 gap-10 mt-10">
				<y-item-video v-for="(item,index) in list" :key='item.id' @success="paging.reload()"
					@clickCenter="openPopup" :detail="item"></y-item-video>
			</view>

			<template #empty>
				<view class="w-p-100 flex flex-center flex-column">
					<image src="/static/image/empty.png" class="empty"></image>
					<view class="w-p-100 flex flex-center ">
						<view class="flex flex-column gap-8 flex-y-center w-p-100">
							<text class="fs-18 text-333 fw-bold">暂无作品</text>
							<text class="fs-12 text-999">立即去创建一个吧</text>
							<view class="btn-blue mt-10 w-p-70" @click="$page.open('/pages/created/works/index')">创建数字人
							</view>
						</view>
					</view>
				</view>
			</template>
		</z-paging>
		<y-popup ref="popup" mode="bottom" round="8px">
			<view class="p-20 flex flex-center flex-column gap-10">
				<video :src="src" class='w-p-100 h-300'></video>
				<button class='btn-blue w-p-100' @click="popup.close();download.downloadStart(src)">下载视频</button>
			</view>
		</y-popup>
		<y-download ref="download"></y-download>
		<y-popup ref="loginPopup" mode='bottom' round='12px'>
			<view class="pb-10">
				<y-login @close="loginPopup.close()"></y-login>
			</view>
		</y-popup>
	</view>
</template>

<script setup>
	import useZPaging from "@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js";
	import { reactive, ref, onMounted } from 'vue';
	import { getWorksList } from '@/api/works.js'
	import { onShow, onReachBottom, onPageScroll } from '@dcloudio/uni-app'
	import { useRefs, useUserStore } from '@/stores'
	import { $page } from "@/utils";
	const { hasLogin, getUserInfo } = useUserStore()
	const type = ref(0)
	const paging = ref(null)
	const list = ref([])
	const src = ref()
	const selectDetail = ref()
	const popup = ref()
	const download = ref()
	useZPaging(paging)
	const loginPopup = ref()
	const tabList = reactive([
		{ label: '全部', value: 0 },
		{ label: '完成', value: 2 },
		{ label: '进行中', value: 1 },
		{ label: '失败', value: 3 }
	])

	onMounted(() => {
		if (hasLogin()) {
			paging.value.reload()
			getUserInfo()
		} else {
			loginPopup?.value.open()
		}
	})
	const getList = (page, limit) => {
		getWorksList({ page: page, limit: limit, type: type.value }).then(res => {
			paging.value.complete(res.data)
		})
	}
	const openPopup = (e) => {
		if (e.status == 2) {
			src.value = e.video_url
			popup.value.open()
		}
	}

	onShow(() => {
		if (paging.value && hasLogin()) {
			paging.value.reload()
		}
	})
</script>

<style>

</style>